
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>


    <title>Boost 搜索引擎</title>
    <style>
        /*去掉网页中所有默认的内外边距*/
        * {
            /* 设置外边距 */
            margin: 0;
            /* 设置内边距 */
            padding: 0;
        }

        /* 将我们的body内的内容100%的呈现在网页中 */
        html,
        body {
            height: 100%;
        }

        /* 类选择器.container */
        .container {
            /* 设置div的宽度 */
            width: 800px;
            /* 通过设置外边距达到居中的目的 */
            margin: 0px auto;
            /* 设置上边距 */
            margin-top: 30px;
        }

        /* 复合选择器，选择container下的search */
        .container .search {
            /* 宽度与父标签一致 */
            width: 100%;
            /* 高度设置为52px */
            height: 52px;
        }

        /* 先选中input标签 直接设置标签的属性，先要选择，input：标签选择器*/
        .container .search input {
            /* 设置left浮动 */
            float: left;
            width: 600px;
            height: 50px;
            /* 设置边框属性：宽度 样式 颜色 */
            border: 1px solid black;
            /* 去掉input输入框的右边框 */
            border-right: none;
            /* 设置内边距 */
            padding-left: 10px;
            /* input内部字体颜色和大小 */
            color: darkgray;
            font-size: 15px;
        }

        .container .search button {
            /* 设置left浮动 */
            float: left;
            width: 120px;
            height: 52px;
            /* 设置button的背景颜色  #fc5531*/
            background-color: #fc5531;
            /* 设置button中字体颜色 */
            color: #fff;
            /* 设置字体的大小 */
            font-size: 19px;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
        }

        .container .result {
            width: 100%;
        }

        .container .result .item {
            margin-top: 12px;
        }

        .container .result .item a {
            /* 设置为块级元素，单独占一行 */
            display: block;
            /* 去掉a标签的下划线 */
            text-decoration: none;
            /* 设置a标签的文字的大小 */
            font-size: 19px;
            /* 设置字体颜色 */
            color: rgb(181, 30, 30);
            font-weight: 500;
        }

        .container .result .item a:hover {
            /*设置鼠标放在a之上的动态效果*/
            text-decoration: underline;
        }

        .container .result .item p {
            margin-top: 5px;
            font-size: 16px;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
        }

        .container .result .item i {
            /* 设置为块级元素，单独占一行 */
            margin-top: 3px;
            display: block;
            font-size: 14px;
            color: green;
        }
        /* body {
            background-image: url('芙宁娜.jpg'); /* 将 'your_image.jpg' 替换为实际的图片文件名 */
            /* background-size: cover; /* 这会使图片完全覆盖背景区域，你也可以使用其他值如 contain 等 */
            /* background-repeat: no-repeat; /* 防止图片重复显示 */
            /* } */ 
    </style>
</head>

<body>
    <div class="container">
        <div class="search">
            <input type="text" value="请输入搜索关键字..." onkeydown="if(event.keyCode === 13) Search()">
            <button onclick="Search()">搜索一下</button>
        </div>
        <div class="result">
        </div>
        <script>
            function Search() {
                // 浏览器提示框
                // alert("Hello Js!");
                // 1.提取数据，$可以理解为Jquery的别称
                let query = $(".container .search input").val();
                console.log("query = " + query);// console是浏览器的对话框，可以查看js数据

                // 2.发起http请求 ajax：属于一个和后端交互的函数，属于Jquery
                $.ajax({
                    type: "GET",
                    url: "/s?word=" + query,
                    success: function (data) {
                        console.log(data);
                        BuildHtml(data)
                    }
                });
            }
            function BuildHtml(data) {
                // 获取html中的result标签
                let result_lable = $(".container .result");
                // 清空历史搜索结果
                result_lable.empty();

                for (let elem of data) {
                    // console.log(elem.title);
                    // console.log(elem.url);

                    let a_lable = $("<a>", {
                        text: elem.title,
                        href: elem.url,
                        // 跳转至新的页面
                        target: "_blank"
                    });

                    let p_lable = $("<p>", {
                        text: elem.abstract
                    });

                    let i_lable = $("<i>", {
                        text: elem.url
                    });

                    let div_lable = $("<div>", {
                        class: "item"
                    });

                    a_lable.appendTo(div_lable);
                    p_lable.appendTo(div_lable);
                    i_lable.appendTo(div_lable);
                    div_lable.appendTo(result_lable);
                }
            }
        </script>
</body>

</html>    
